<%-- 
    Document   : crearCurso
    Created on : 08-12-2014, 20:14:30
    Author     : Rodrigo
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<c:set var="contextPath" value="${pageContext.servletContext.contextPath}"/>

<!DOCTYPE html>
<html>
    <head>
        <title>Epraxis - ${curso.nombre}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="${contextPath}/css/font-awesome.min.css">
        <link rel="stylesheet" href="${contextPath}/css/epraxis.css">
        <style type="text/css">
            /*            .ui-state-highlight { height: 1.5em; line-height: 1.2em; }
                        #listaUnidadesCapitulos li { cursor: move; }*/
        </style>
    </head>
    <body class="body">
        <c:import url="/app/commons/Menu.view"/>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <h2>Datos del curso</h2>
                            <form id="formDatosCurso" method="POST">
                                <strong class="font-size-14">Nombre del curso:</strong> ${curso.nombre}
                                <br>
                                <strong class="font-size-14">Descripción del curso:</strong> ${curso.descripcion}
                                <br>
                                <strong class="font-size-14">Categoría:</strong> ${curso.categoria.nombre}
                                <br>
                            </form>

                            <br><hr><br>

                            <h2>Unidades y capitulos</h2>
                            <span class="help-block">
                                En esta sección puede añadir nuevas <b>unidades</b> y <b>capitulos</b> a su curso.
                            </span>

                            <button type="button" class="btn btn-success" onclick="añadirUnidad()">
                                <i class="glyphicon glyphicon-plus color-white"></i>
                                Ingresar nueva unidad
                            </button>
<!--                            <button type="button" class="btn btn-default" onclick="añadirCapitulo()" ${listaUnidad == null || listaUnidad.isEmpty() ? 'disabled="true"' : ''}>
                                <i class="glyphicon glyphicon-plus color-limegreen"></i>
                                Ingresar nuevo capitulo
                            </button>-->
                            <br><br>

                            <ul id="listaUnidadesCapitulos" class="list-group">
                                <c:forEach var="unidad" items="${listaUnidad}" varStatus="statusUnidad">
                                    <li class="list-group-item font-size-14 unidad">
                                        <span class="color-gray font-size-11 pull-right text-right">
                                            <span class="panel-option-control display-none">
                                                <button type="button" onclick="añadirCapitulo('${unidad.id}')" data-toggle="tooltip" class="btn btn-success btn-xs option-control"><i class="glyphicon glyphicon-plus color-white font-size-14"></i> Añadir capitulo</button>
                                                <button type="button" onclick="eliminarUnidad('${unidad.id}')" data-toggle="tooltip" class="btn btn-danger btn-xs option-control"><i class="glyphicon glyphicon-remove color-white font-size-14"></i> Eliminar</button>
                                            </span>
                                        </span>
                                        <span class="h4 color-lightgray">Unidad ${statusUnidad.count}:</span>
                                        <strong>${unidad.nombre}</strong>
                                        <c:choose>
                                            <c:when test="${unidad.descripcion != null && !unidad.descripcion.isEmpty()}">
                                                <br>${unidad.descripcion}
                                            </c:when>
                                            <c:otherwise>
                                                <br><i>(Sin descripción)</i>
                                            </c:otherwise>
                                        </c:choose>
                                        <!--<span class="pull-right">-->
                                            <!--<a href="#" onclick="editarUnidad('${unidad.id}')" title="Editar unidad" class="option-control"><i class="glyphicon glyphicon-edit color-steelblue font-size-14"></i></a>-->
                                            <!--<a href="#" onclick="eliminarUnidad('${unidad.id}')" title="Eliminar unidad" class="option-control"><i class="glyphicon glyphicon-remove color-red font-size-14"></i></a>-->
                                        <!--</span>-->
                                    </li>
                                    <c:forEach var="capitulo" items="${mapaUnidadCapitulo.get(unidad)}" varStatus="statusCapitulo">
                                        <li class="list-group-item margin-left-5-percent width-95-percent font-size-12 capitulo">
                                            <span class="color-gray font-size-11 pull-right text-right">
                                                <span class="panel-option-control display-none">
                                                    <button type="button" onclick="editarCapitulo('${capitulo.id}')" data-toggle="tooltip" class="btn btn-primary btn-xs option-control" title="Editar capitulo"><i class="glyphicon glyphicon-edit color-white font-size-14"></i> Editar</button>
                                                    <button type="button" onclick="eliminarCapitulo('${capitulo.id}')" data-toggle="tooltip" class="btn btn-danger btn-xs option-control" title="Eliminar capitulo"><i class="glyphicon glyphicon-remove color-white font-size-14"></i> Eliminar</button>
                                                </span>
                                            </span>
                                            <span class="h5 color-lightgray">Capitulo ${statusUnidad.count}.${statusCapitulo.count}:</span>
                                            <strong>${capitulo.nombre}</strong>  
                                            <c:choose>
                                                <c:when test="${capitulo.descripcion != null && !capitulo.descripcion.isEmpty()}">
                                                    <br>${capitulo.descripcion}  
                                                </c:when>
                                                <c:otherwise>
                                                    <br><i>(Sin descripción)</i>
                                                </c:otherwise>
                                            </c:choose>
                                        </li>
                                    </c:forEach>
                                    <br>
                                </c:forEach>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="modal fade" id="modalEditar">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 id="tituloModalEditar" class="modal-title"></h4>
                    </div>
                    <div class="modal-body" id="body-modal-editar">
                        <iframe id="iframeEditar" src="" class="no-border"></iframe>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalUnidad">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Ingresar unidad</h4>
                    </div>
                    <div class="modal-body">
                        <form id="formUnidad" name="formUnidad">
                            <input type="hidden" name="curso" value="${curso.id}"/>
                            <strong class="font-size-14">Nombre de la unidad</strong>
                            <span class="help-block">
                                Este será el nombre con el que se identifica a esta unidad
                            </span>
                            <input type="text" id="nombreUnidad" name="nombreUnidad" class="form-control"/>
                            <br>
                            <strong class="font-size-14">Descripción</strong>
                            <span class="help-block">
                                Aquí se explica con más detalle el contenido de la unidad, dando una idea general de los distintos capítulos que se encuentran en esta
                            </span>
                            <textarea name="descripcionUnidad" class="form-control"></textarea>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="button" onclick="guardarUnidad()" class="btn btn-primary btnGuardar"
                                data-loading-text="<i class='fa fa-spin fa-spinner'></i> Guardando...">
                            Guardar esta unidad
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="modalCapitulo">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Ingresar capitulo para la unidad: <span id="nombreUnidadIngresarCapitulo" class="color-black"></span></h4>
                    </div>
                    <div class="modal-body">
                        <form id="formCapitulo" name="formCapitulo">
                            <input type="hidden" name="modo" value="INSERT"/>
                            <input type="hidden" name="curso" value="${curso.id}"/>
                            <div class="display-none">
                                <strong class="font-size-14">Unidad</strong>
                                <span class="help-block">
                                    Seleccione la unidad dentro de la cual estará este capitulo
                                </span>
                                <select id="unidadCapitulo" name="unidadCapitulo" class="form-control">
                                    <option value="0"></option>
                                    <c:forEach var="unidad" items="${listaUnidad}">
                                        <option value="${unidad.id}">${unidad.nombre}</option>
                                    </c:forEach>
                                </select>
                                <br>
                            </div>
                            <strong class="font-size-14">Nombre del capitulo</strong>
                            <span class="help-block">
                                Este será el nombre con el que se identifica a este capitulo
                            </span>
                            <input type="text" id="nombreUnidad" name="nombreCapitulo" class="form-control"/>
                            <br>
                            <strong class="font-size-14">Descripción</strong>
                            <span class="help-block">
                                Aquí se explica con más detalle el contenido del capitulo, dando una idea general del tema que abarcará este capitulo
                            </span>
                            <textarea name="descripcionCapitulo" class="form-control"></textarea>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                        <button type="button" onclick="guardarCapitulo()" class="btn btn-primary btnGuardar"
                                data-loading-text="<i class='fa fa-spin fa-spinner'></i> Guardando...">
                            Guardar este capitulo
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript" src="${contextPath}/js/jquery-2.1.1.js"></script>
        <script type="text/javascript" src="${contextPath}/js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="${contextPath}/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="${contextPath}/js/epraxis.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function() {
//                $('.option-control').tooltip();
                $('#modalUnidad').on('hidden.bs.modal', function(e) {
                    $('#nombreUnidad').val('');
                    $('#descripcionUnidad').val('');
                });

                $('.capitulo, .unidad').hover(function() {
                    $(this).find('.panel-option-control').show();
                }, function() {
                    $(this).find('.panel-option-control').hide();
                });

                $('#modalEditar').on('shown.bs.modal', function(e) {
                    var iframe = document.getElementById('iframeEditar');
                    resizeIframe(iframe);
                });

                $('.btnGuardar').on('click', function() {
                    startLoadingButton($(this));
                });

                $('#iframeEditar').load(function() {
                    $('#modalEditar').modal('show');
                });
            });

            function añadirUnidad() {
                $('#nombreUnidad').val('');
                $('#descripcionUnidad').val('');
                $('#modalUnidad').modal('show');
                $('#nombreUnidad').focus();
            }
            function añadirCapitulo(idUnidad) {
                $('#nombreCapitulo').val('');
                $('#descripcionCapitulo').val('');
                $('#modalCapitulo').modal('show');
                $('#unidadCapitulo').focus();
                $('#unidadCapitulo').val(idUnidad);
                var nombreUnidad = $('#unidadCapitulo option[value=' + idUnidad + ']').text();
                $('#nombreUnidadIngresarCapitulo').html(nombreUnidad);
            }

            function guardarUnidad() {
                var url = '${contextPath}/app/unidad/IngresarUnidadProcess.do';
                var parametros = $('#formUnidad').serialize();
                post(url, parametros, function(data, isError) {
                    if (isError) {
                        alert(data);
                    } else {
                        $('#modalUnidad').modal('hide');
                        document.location.reload();
                    }
                });
            }
            function guardarCapitulo() {
                var url = '${contextPath}/app/capitulo/CapituloProcess.do';
                var parametros = $('#formCapitulo').serialize();
                post(url, parametros, function(data, isError) {
                    if (isError) {
                        alert(data);
                    } else {
                        $('#modalCapitulo').modal('hide');
                        document.location.reload();
                    }
                });
            }

            function eliminarUnidad(id) {
                if (confirm('¿Desea eliminar esta unidad?\nSe eliminarán además los capitulos que estén dentro con todo su contenido')) {
                    var url = '${contextPath}/app/unidad/EliminarUnidadProcess.do';
                    var parametros = 'id=' + id;
                    post(url, parametros, function(data, isError) {
                        if (isError) {
                            alert(data);
                        } else {
                            document.location.reload();
                        }
                    });
                }
            }
            function eliminarCapitulo(id) {
                if (confirm('¿Desea eliminar este capitulo?\nSe eliminará además el contenido que tenga este capitulo')) {
                    var url = '${contextPath}/app/capitulo/EliminarCapituloProcess.do';
                    var parametros = 'id=' + id;
                    post(url, parametros, function(data, isError) {
                        if (isError) {
                            alert(data);
                        } else {
                            document.location.reload();
                        }
                    });
                }
            }

            function editarCapitulo(id) {
                var url = '${contextPath}/app/capitulo/EditarCapituloDisplay.view?id=' + id;
                $('#tituloModalEditar').html('Editar capitulo');
//                $('#body-modal-editar').load(url);
//                $('#modalEditar').modal('show');
                $('#iframeEditar').attr('src', url);
            }
            function editarUnidad(id) {
                var url = '${contextPath}/app/capitulo/EditarUnidadDisplay.view?id=' + id;
                $('#iframeEditar').attr('src', url);
            }

            function cerrarModalEditar() {
                $('#modalEditar').modal('hide');
            }

            function guardarDatosCurso() {
                if (confirm('¿Desea guardar los datos del curso?\nEstos serán enviados a un evaluador especializado que aprobará o rechazará su curso.')) {
                    document.location = '${contextPath}/app/Home.view';
                }
            }
            function volver() {
                if (confirm('¿Desea regresar a la página principal?\nPodrá seguir editando los datos del curso cuando quiera')) {
                    document.location = '${contextPath}/app/Home.view';
                }
            }
        </script>
    </body>
</html>
